<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script lang="ts">
import echarts, { ECharts } from 'echarts'
import { Component, Prop, Watch } from 'vue-property-decorator'
import { mixins } from 'vue-class-component'
import ResizeMixin from '@/components/charts/mixins/resize'
import MacaronsTheme from '@/components/charts/themes/macarons'

export interface IChartData {
  xAxis: string[]
  yAxisData1: number[]
  yAxisData2: number[]
}

@Component({
  name: 'InoutChart'
})
export default class extends mixins(ResizeMixin) {
  @Prop({ required: true }) private chartData!: IChartData
  @Prop({ default: 'chart' }) private className!: string
  @Prop({ default: '100%' }) private width!: string
  @Prop({ default: '430px' }) private height!: string

  protected chart!: ECharts | null

  @Watch('chartData', { deep: true })
  private onChartDataChange(value: IChartData) {
    this.setOptions(value)
  }

  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  }

  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  }

  private initChart() {
    this.chart = echarts.init(this.$el as HTMLDivElement, MacaronsTheme)
    this.setOptions(this.chartData)
  }

  private setOptions(chartData: IChartData) {
    if (this.chart) {
      this.chart.setOption({
        grid: {
          top: 20,
          left: 50,
          right: 30,
          bottom: 80
        },
        color: ['#FF7100', '#FFB200'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['入库', '出库'],
          bottom: 10
        },
        toolbox: {
          show: false,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            mark: { show: false },
            dataView: { show: false, readOnly: false },
            magicType: { show: false, type: ['line', 'bar', 'stack', 'tiled'] },
            restore: { show: false },
            saveAsImage: { show: false }
          }
        },
        xAxis: [
          {
            type: 'category',
            axisTick: { show: true },
            data: chartData.xAxis,
            axisLine: {
              lineStyle: {
                color: '#e4dbda'
              }
            },
            axisLabel: {
              show: true,
              margin: 20,
              color: '#332929',
              fontWeight: 400
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              textStyle: {
                color: '#332929'
              }
            },
            splitArea: {
              show: false
            },
            splitLine: {
              lineStyle: {
                color: '#e4dbda',
                type: 'dashed'
              }
            }
          }
        ],
        series: [
          {
            name: '入库',
            type: 'bar',
            barGap: 0,
            data: chartData.yAxisData1
          },
          {
            name: '出库',
            type: 'bar',
            data: chartData.yAxisData2
          }
        ]
      } as any)
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'index';
</style>
